<template>
	<view class="line">
		<view class="map">
			<map v-if="detailInfo.id" style="width: 100%; height: 900rpx;" :latitude="detailInfo.location[0]" :longitude="detailInfo.location[1]" :markers="detailInfo.markers" show-scale="true"></map>
			<view class="infos">
				<view class="tit">
					当前游玩项目：{{detailInfo.title}}
				</view>
				<view class="stars">
					<text>项目推荐：</text>
					<up-rate :count="count" v-model="detailInfo.count"></up-rate>
				</view>
				<view class="scrollView">
					<up-scroll-list :indicator="true" indicatorColor="#fff0f0" indicatorActiveColor="#f56c6c">
					    <view class="items" v-for="(item,index) in detailInfo.other" :key="item.id">
					       	<image class="img" :src="item.url" mode="aspectFill"></image>
					       	<view class="title">{{ item.name }}</view>
					    </view>
					</up-scroll-list>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { onLoad } from '@dcloudio/uni-app'
	import { projectInfo } from '../../api/api.js'
	import { ref, reactive } from 'vue'
	
	// 评分星星可选数
	const count = ref(5)
	// 项目详情
	const detailInfo = ref({})
	
	onLoad((pops) => {
		projectInfo({id: pops.id}).then(res => {
			detailInfo.value = res
			console.log(detailInfo.value)
		})
	})
</script>

<style lang="scss" scoped>
	.infos {
		padding: 20rpx;
		box-sizing: border-box;
		.tit {
			font-size: 34rpx;
			font-weight: 600;
			color: #333;
		}
		.stars {
			display: flex;
			font-size: 28rpx;
			margin: 20rpx 0 40rpx;
		}
		.items {
			margin-right: 20rpx;
			text-align: center;
		}
		.img {
			width: 320rpx;
			height: 200rpx;
			border-radius: 14rpx;
		}
		.text {
			font-size: 28rpx;
			font-weight: 600;
			color: #333;
		}
	}
</style>
